<template>
  <div class="did-h">
    <div class="black black-h">
      <div>战术数据上传</div>
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="6">
          <el-form label-position="right" label-width="100px" :model="form">
            <el-form-item label="战术链DID" align="center">
              <el-input v-model="form.tacticalChainDid" placeholder="请输入战术链DID" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="战术ID" align="center">
              <el-input v-model="form.tacticalId" placeholder="请输入的战术ID" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="任务名称" align="center">
              <el-input v-model="form.taskName" placeholder="输入任务名称" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="上传者DID" align="center">
              <el-input v-model="form.uploader" placeholder="输入上传者DID"></el-input>
            </el-form-item>
            <el-form-item label="文件权限等级" align="center">
              <el-cascader :options="Options" :props="Props" clearable @change="handleCascaderChange1"></el-cascader>
            </el-form-item>
          </el-form>
          <el-row>
            <el-col :span="5">
              <div class="upload-button">
                <el-upload class="upload" ref="upload" action="string" :file-list="fileList" :auto-upload="false" :http-request="uploadFile" :on-change="handleChange" :on-preview="handlePreview" :on-remove="handleRemove" multiple="multiple">
                  <el-button slot="trigger" size="small" type="primary" @click="delFile">选取文件</el-button>
                </el-upload>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <div class="did-button">
        <el-button size="medium" type="primary" @click="onSubmit">上传文件</el-button>
      </div>
    </div>
  </div>
</template>
  <script>
import NoData from '../../components/noData.vue';
export default {
  created() {
    this.getPremission();
    this.form.tacticalChainDid = this.$route.query.tacticalChainDid;
    this.form.tacticalId = this.$route.query.tacticalId;
    this.form.taskName = this.$route.query.tacticalName;
    this.form.uploader = window.localStorage.getItem('userDid');
  },
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      form: {
        tacticalChainDid: '',
        tacticalId: '',
        taskName: '',
        uploader: '',
        level: '',
      },
      data: '',
      // el-upload组件绑定的属性—— :file-list=“fileList”,渲染后fileList[index]是Object类型,而不是后台所需的File类型,
      // 而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里,直接拿来用就好.
      fileList: [],
      // 不支持多选
      multiple: false,
      formData: '',
      block: {
        blockHash: '',
        blockNumber: '',
        hash: '',
        signature: '',
      },
      //级联选择器1
      Options: [],
      Props: {
        multiple: false,
        value: 'object',
        label: 'object',
      },
      //级联选择器选择的文件权限等级
      addPermission: [],
    };
  },
  mounted() {},
  methods: {
    //点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = [];
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
      // console.log(this.fileList, "sb");
    },
    //自定义上传文件
    uploadFile(file) {
      this.formData.append('file', file.file);
      // console.log(file.file, "sb2");
    },
    //删除文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件
    handlePreview(file) {
      console.log(file);
    },
    //保存按钮
    onSubmit() {
      console.log(1);
      console.log(this.fileList);
      let formData = new FormData();
      console.log(this.fileList);
      formData.append('file', this.fileList[0].raw);
      //拿到存在fileList的文件存放到formData中
      //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
      formData.append('title', this.fileList[0].name);

      //数据描述
      formData.append('tacticalChainDid', this.form.tacticalChainDid);
      formData.append('tacticalId', this.form.tacticalId);
      formData.append('taskName', this.form.taskName);
      formData.append('uploader', this.form.uploader);
      formData.append('uploaderDid', this.form.uploader);
      formData.append('level', this.form.level);

      this.$http.post(this.$api.tacticalChain.uploadChainData, formData).then((res) => {
        if (res.status === 200) {
          console.log(res);
          this.block = res.data.BlockInfor[0];
          this.open();
        }
      });
    },

    open() {
      let str = '<div style="word-wrap: break-word;">区块hash：' + this.block.blockHash + '<br>交易hash：' + this.block.hash + '<br>交易签名：' + this.block.signature.signature + '</div>';
      this.$alert(str, '文件上链信息', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        callback: (action) => {
          this.$message({
            type: 'success',
            message: '文件上传成功',
          });
        },
      });
    },
    //获取级联选择器1的数值 选择的文件权限
    handleCascaderChange1(selectedValues) {
      console.log(selectedValues);
      this.form.level = selectedValues;
      console.log('Selected values:', selectedValues);
    },
    //获取权限
    async getPremission() {
      let formdata = new FormData();
      formdata.append('pageNum', 1);
      formdata.append('pageSize', 1000);
      let res = await this.$http.post(this.$api.userIdentity.getPermissionsList, formdata);
      if (res.status == 200) {
        const setData = new Set();
        const arrayData = res.data.records;
        arrayData.forEach((item) => {
          setData.add(item.object);
        });
        setData.forEach((item) => {
          this.Options.push({
            name: item,
            object: item,
          });
        });
        console.info('级联');
        console.info(this.Options);
      }
    },
    //获取级联选择器1的数值 选择的参与用户
    handleCascaderChange(selectedValues) {
      this.addPermission = selectedValues;
      console.log('Selected  permission values:', this.addPermission);
    },
  },
};
</script>
  <style lang="less" scoped>
.output {
  width: 90%;
  margin: auto;
  margin-top: 20px;
}
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
}
.black-height {
  height: calc(50% - 90px);
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.text-c {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}

.update {
  // text-align: center;
  // margin-left: -0%; /* 调整到左边的位置 */
}

.upload-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload-button {
  width: 800px;
}
</style>
  